<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> <i class="el-icon-shopping-bag-2"></i> 首页设置 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-card class="box-card" v-loading="bannerListLoad">
        <div slot="header" class="clearfix">
          <span>轮播图设置</span>
        </div>
        <el-row>
          <el-col :span="8" v-for="item in bannerList" :key="item.mhpId">
            <el-image style="width: 375px; height: 200px" :src="item.mhpPhotoUrl" fit="fill" :preview-src-list="bannerimgList"></el-image>
            <div style="text-align: center;">
              <el-upload class="upload-demo" action="" :before-upload="(file)=>{editBanner(file,item.mhpId)}" accept=".png,.jpg"
                         :show-file-list="false">
                <el-button size="small" type="text" icon="el-icon-edit">重新上传</el-button>
              </el-upload>
              <el-button type="text" icon="el-icon-delete" @click="delBanner(item.mhpId)">删除</el-button>
              <el-button type="text" icon="el-icon-link" @click="linkClick(item.mhpId)">选择链接</el-button>
              <el-popover v-if="item.mhpOutLink || item.mhpProductId" placement="bottom" title="" width="200" trigger="hover"
                          style="margin-left:10px;">
                <p>{{item.mhpType == 0 ? item.mhpName : item.mhpOutLink}}</p>
                <el-button slot="reference" type="text" icon="el-icon-link" @click="linkClick(item.mhpId)">已有链接</el-button>
              </el-popover>
            </div>
          </el-col>
          <el-col :span="8">
            <el-upload class="upload-demo" drag action="" :before-upload="addBanner" accept=".png,.jpg" :show-file-list="false">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb，推荐上传 375*200</div>
            </el-upload>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>标题设置</span>
        </div>
        <el-form ref="form" :model="titleIndex" label-width="110px">
          <el-form-item label="首页标题设置">
            <el-input v-model="titleIndex.title"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="titleEditSub" :loading="titleIndex.load">提交</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <!-- 公告 -->
      <notice></notice>
    </div>
    <!-- 选择链接 -->
    <el-dialog title="选择链接" :visible.sync="linkFlg" width="60%">
      <el-radio-group v-model="linkRadio" style="margin-bottom:20px;">
        <el-radio label="0">链接产品</el-radio>
        <el-radio label="1">自定义链接</el-radio>
      </el-radio-group>
      <div v-if="linkRadio == '0'" v-loading="linkLoad">
        <div class="handle-box">
          <el-date-picker v-model="query.time" class="mr10" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                          value-format="yyyy-MM-dd">
          </el-date-picker>
          <el-input placeholder="请输入产品名称查询" v-model="query.souVal" class="handle-input mr10" style="width:40%;"></el-input>
          <el-button type="primary" icon="el-icon-search" @click="souClick">搜索</el-button>
        </div>
        <el-table :data="linkTable">
          <el-table-column property="pbName" label="产品名称">
            <template slot-scope="scope">
              <el-link type="primary" :underline="false">{{scope.row.pbName}}</el-link>
            </template>
          </el-table-column>
          <el-table-column property="typeName" label="分类" width="100"></el-table-column>
          <el-table-column property="quotaMin" label="额度上限" width="150">
            <template slot-scope="scope">
              {{scope.row.quotaMin == scope.row.quotaMax ? scope.row.quotaMax+"万" : scope.row.quotaMin+"万-"+scope.row.quotaMax+"万"}}
            </template>
          </el-table-column>
          <el-table-column property="address" label="操作" width="150">
            <template slot-scope="scope">
              <el-button type="primary" class="red" @click="cheClick(scope.row.pbId)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination background layout="total, prev, pager, next" :current-page="query.page" :page-size="query.limit" :total="query.totalCount"
                         :pager-count="5" @current-change="PageChange" @prev-click="PageChange" @next-click="PageChange"></el-pagination>
        </div>
      </div>
      <el-form v-loading="linkLoad" v-if="linkRadio == '1'" ref="form" label-width="100px">
        <el-form-item label="自定义链接">
          <el-input v-model="linkName" placeholder="请输入自定义链接，格式https://xxx.xxx.com"></el-input>
        </el-form-item>
      </el-form>
      <div v-if="linkRadio == '1'" slot="footer" class="dialog-footer">
        <el-button @click="linkFlg = false">取 消</el-button>
        <el-button type="primary" @click="cheClick">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { homePageBanner, homePageBannerAdd, homePageBannerEdit, homePageDelBanner, homePageGetTitle, homePageEditTitle, productGetTable, homePageDelBannerSetLink } from '../../../api/index';
import Storage from '../../../utils/localStorage';
import cosUpFile from '../../../utils/cos';
import notice from './businessHomeTemplate/notice.vue'
export default {
  data() {
    return {
      uploadHeader: { Authorization: Storage.getItem('token') ? Storage.getItem('token') : '1' },
      bannerListLoad: false,
      bannerimgList: [],
      bannerList: [],
      titleIndex: {
        title: '',
        load: false,
      },

      linkFlg: false,
      linkLoad: false,
      linkRadio: '0',
      linkTable: [],
      linkName: 'https://',
      linkEdit: '',

      query: {
        time: [],
        souVal: '',
        page: 1,
        limit: 10,
        totalCount: 0
      }
    };
  },
  components: {
    notice
  },
  created() {
    this.getBanner();
    this.getTitle();
  },
  methods: {
    //获取轮播图
    getBanner() {
      homePageBanner().then((res) => {
        if (res.code == 0) {
          this.bannerList = res.list;
          this.bannerimgList = [];
          res.list.forEach((item, i) => {
            this.bannerimgList.push(item.mhpPhotoUrl);
          })
        } else {
          this.$message(res.msg);
        }
      })
    },
    //上传图片
    addBanner(file) {
      cosUpFile(file, (err, data) => {
        if (err) {
          this.$message("上传失败");
        } else {
          homePageBannerAdd({ filePath: 'https://' + data.Location }).then(res => {
            if (res.code == 0) {
              this.$message.success("上传成功");
              this.getBanner();
            } else {
              this.$message(res.msg);
            }
          })
        }
      })
      return false;
    },
    //修改banner
    editBanner(file, id) {
      cosUpFile(file, (err, data) => {
        if (err) {
          this.$message("上传失败");
        } else {
          homePageBannerEdit({ filePath: 'https://' + data.Location, mhpId: id }).then(res => {
            if (res.code == 0) {
              this.$message.success("编辑成功");
              this.getBanner();
            } else {
              this.$message(res.msg);
            }
          })
        }
      })
      return false;
    },
    //删除banner
    delBanner(id) {
      homePageDelBanner({ mhpId: id }).then((res) => {
        if (res.code == 0) {
          this.$message.success("删除成功");
          this.getBanner();
        } else {
          this.$message(res.msg);
        }
      })
    },
    //获取标题
    getTitle() {
      homePageGetTitle().then((res) => {
        if (res.code == 0) {
          this.titleIndex.title = res.title;
        } else {
          this.$message(res.msg);
        }
      })
    },
    //提交修改标题
    titleEditSub() {
      this.titleIndex.load = true;
      homePageEditTitle({
        // hptId:this.
        hptTitle: this.titleIndex.title
      }).then((res) => {
        this.titleIndex.load = false;
        if (res.code == 0) {
          this.$message.success('修改成功');
        } else {
          this.$message(res.msg);
        }
      })
    },
    //选择连接
    linkClick(id) {
      this.linkEdit = id;
      this.linkFlg = true;
      this.getTable();
    },
    //选中
    cheClick(id) {
      let query;
      this.linkLoad = true;
      if (this.linkRadio == '0') {
        query = {
          id: this.linkEdit,
          type: this.linkRadio,
          productId: id,
          link: ''
        };
      } else {
        query = {
          id: this.linkEdit,
          type: this.linkRadio,
          productId: '',
          link: this.linkName
        };
      }
      homePageDelBannerSetLink(query).then(res => {
        this.linkFlg = false;
        this.linkLoad = false;
        if (res.code == 0) {
          this.getBanner();
        } else {
          this.$message(res.msg);
        }
      })
    },
    //翻页
    PageChange(num) {
      this.query.page = num;
      this.getTable();
    },
    //列表获取
    getTable() {
      this.linkLoad = true;
      let query = {
        page: this.query.page,
        limit: this.query.limit,
        startTime: this.query.time[0],
        endTime: this.query.time[1],
        kw: this.query.souVal,
        type: this.query.type,
      }
      productGetTable(query).then((res) => {
        this.linkLoad = false;
        if (res.code == 0) {
          res.recordList.forEach(item => {
            item.okShen = false;
            item.isShow = String(item.isShow);
          })
          this.linkTable = res.recordList;
          this.query.totalCount = res.totalCount;
        } else {
          this.$message(res.msg);
        }
      })
    },
    //搜索
    souClick() {
      this.query.page = 1;
      this.getTable();
    },
  }
};
</script>

<style scoped>
.box-card {
    margin-bottom: 20px;
}
</style>
